<template>
  <common-dialog
    :title="title"
    :visible="visible"
    :close-on-click-modal="true"
    :is-top-divided="isTopDivided"
    :is-fixed-height="isFixedHeight"
    :is-bottom-divided="isBottomDivided"
    :width="width"
    @close="$emit('cancel', $event)"
  >
    <div
      v-loading="infoLoading"
      slot="default"
      :class="[
        'global-common-info-dialog-body',
        isPadding ? 'info-dialog-inside-padding' : '',
      ]"
    >
      <slot name="default"></slot>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="$emit('cancel', $event)"
        >返 回</el-button
      >
    </div>
  </common-dialog>
</template>

<script>
import CommonDialog from "@/components/CommonDialog";

export default {
  name: "CommonInfoDialog",
  props: {
    visible: {
      type: Boolean,
    },
    width: {
      type: String,
    },
    title: {
      type: String,
      default: "详情",
    },
    isPadding: {
      type: Boolean,
      default: false,
    },
    isTopDivided: {
      type: Boolean,
      default: true,
    },
    isBottomDivided: {
      type: Boolean,
      default: true,
    },
    isFixedHeight: {
      type: Boolean,
      default: false,
    }, //是否固定高度50%
    infoLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  components: {
    CommonDialog,
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss">
.global-common-info-dialog-body {
  height: 100%;
  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.info-dialog-inside-padding {
  padding: 12px;
  box-sizing: border-box;
}

.el-select {
  width: 100%;
}
</style>
